<!--
 * @Descripttion: 地图新建组件
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-18 16:51:22
 * @LastEditors: daipeng
 * @LastEditTime: 2020-08-25 11:40:12
-->
<template>
	<div>
		<div id="container"></div>
		<div class="input-card" style="width: 28rem;">
			<label style="color: grey;">根据地址获取经纬度坐标</label>
			<div class="input-item">
				<div class="input-item-prepend"><span class="input-item-text">地址</span></div>
				<input id="address" type="text" v-model="area" />
			</div>
			<div class="input-item">
				<div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
				<input id="lnglat" disabled type="text" :value="reversedMessage" />
			</div>
			<div class="wrap_btn">
				<input type="button" class="btn" value="地址转经纬度" @click="geoCode()" />
				<input type="button" class="btn" value="确定" @click="close()" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			area: '北京市海淀区西二旗桥',
			geocoder: '',
			marker: '',
			lng: '', //经度
			lat: '' //纬度
		}
	},
	computed: {
		reversedMessage: function () {
			if (this.lng != '' && this.lat != '') {
				return this.lng + ',' + this.lat
			}
		}
	},
	created() {},
	mounted() {
		this.map = new AMap.Map('container', {
			resizeEnable: true
		})

		this.geocoder = new AMap.Geocoder({
			city: '010' //城市设为北京，默认：“全国”
		})

		this.marker = new AMap.Marker()
		var that = this
		this.map.on('click', function (e) {
			// console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
			that.lng = e.lnglat.getLng()
			that.lat = e.lnglat.getLat()
		})

		this.geoCode()
	},
	methods: {
		geoCode() {
			var address = this.area
			var markers = this.marker
			var maps = this.map
			var that = this
			this.geocoder.getLocation(address, function (status, result) {
				if (status === 'complete' && result.geocodes.length) {
					var lnglat = result.geocodes[0].location
					// console.log(lnglat.lng);
					// console.log(lnglat.lat);
					that.lng = lnglat.lng
					that.lat = lnglat.lat
					markers.setPosition(lnglat)
					maps.add(markers)
					maps.setFitView(markers)
				} else {
					log.error('根据地址查询位置失败')
				}
			})
		},
		close() {
			this.$emit('pagedata', [this.lng, this.lat, this.area])
		}
	}
}
</script>

<style scoped>
@import '../../assets/css/areapicking.css';
#container {
	width: 100%;
	height: 400px;
}

.wrap_btn {
	display: flex;
}

.wrap_btn .btn {
	flex: 1;
}
</style>



// WEBPACK FOOTER //
// src/components/components/Areapicking.vue